<template>
  <p-card :bordered="false">
    <div>
      <p-button @click="clickDrawer" type="primary" icon="plus">抽屉</p-button>
      <p-modal
        title="抽屉"
        width="80%"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        ref="modal"
         id="divID"
      >
        <p-row>
          <p-col :span="21">
            <p-collapse class="headDrawer" default-active-key="1" ref="item1">
              <p-collapse-panel key="1" header="表单">
                <!-- 主表单区域 -->
                <p-form :form="form">
                  <p-row>
                    <p-col :span="12">
                      <p-form-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <p-input
                          v-decorator="[ 'productName', validatorRules.productName]"
                          placeholder="请输入产品名称"
                        ></p-input>
                      </p-form-item>
                    </p-col>
                    <p-col :span="12">
                      <p-form-item label="制令类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <j-dict-select-tag
                          type="list"
                          v-decorator="['type', validatorRules.type]"
                          :trigger-change="true"
                          dictCode="product_type"
                          placeholder="请选择制令类型"
                        />
                      </p-form-item>
                    </p-col>
                    <p-col :span="12">
                      <p-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <j-dict-select-tag
                          type="radio"
                          v-decorator="['status', validatorRules.status]"
                          :trigger-change="true"
                          dictCode="product_status"
                          placeholder="请选择状态"
                        />
                      </p-form-item>
                    </p-col>
                    <p-col :span="12">
                      <p-form-item label="车间名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <p-input
                          v-decorator="[ 'workName', validatorRules.workName]"
                          placeholder="请输入车间名称"
                        ></p-input>
                      </p-form-item>
                    </p-col>
                    <p-col :span="12">
                      <p-form-item label="预计开工日" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <j-date
                          placeholder="请选择预计开工日"
                          v-decorator="[ 'startDate', validatorRules.startDate]"
                          :trigger-change="true"
                          style="width: 100%"
                        />
                      </p-form-item>
                    </p-col>
                    <p-col :span="12">
                      <p-form-item label="预计完工日" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <j-date
                          placeholder="请选择预计完工日"
                          v-decorator="[ 'endDate', validatorRules.endDate]"
                          :trigger-change="true"
                          style="width: 100%"
                        />
                      </p-form-item>
                    </p-col>
                    <p-col :span="12">
                      <p-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <p-input
                          v-decorator="[ 'remark', validatorRules.remark]"
                          placeholder="请输入备注"
                        ></p-input>
                      </p-form-item>
                    </p-col>
                  </p-row>
                </p-form>
              </p-collapse-panel>
            </p-collapse>

            <p-collapse class="headDrawer" default-active-key="1" ref="item2">
              <p-collapse-panel key="1" header="操作员">
                
                <p-form :form="form">
                  <p-row :gutter="16">
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box" type="flex" justify="center">
                        <p-form-model-item
                          :labelCol="labelCol1"
                          :wrapperCol="wrapperCol"
                          label="收获人"
                        >
                          <p-input />
                        </p-form-model-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-model-item
                          :labelCol="labelCol1"
                          :wrapperCol="wrapperCol"
                          label="工单"
                        >
                          <p-input />
                        </p-form-model-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-model-item
                          :labelCol="labelCol1"
                          :wrapperCol="wrapperCol"
                          label="数量"
                        >
                          <p-input />
                        </p-form-model-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-model-item
                          :labelCol="labelCol1"
                          :wrapperCol="wrapperCol"
                          label="日期"
                        >
                          <j-date
                            placeholder="开始日期"
                            v-decorator="['myFrom.startDate']"
                            style="width: 100%"
                          />
                        </p-form-model-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-model-item
                          :labelCol="labelCol1"
                          :wrapperCol="wrapperCol"
                          label="日期"
                        >
                          <j-date
                            placeholder="结束日期"
                            v-decorator="['myFrom.endDate']"
                            style="width: 100%"
                          />
                        </p-form-model-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-item label="制令类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <j-dict-select-tag
                            type="list"
                            v-decorator="['myFrom.type', validatorRules.type]"
                            :trigger-change="true"
                            dictCode="product_type"
                            placeholder="请选择制令类型"
                            style="width:100%"
                          />
                        </p-form-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-model-item
                          :labelCol="labelCol1"
                          :wrapperCol="wrapperCol"
                          label="收获人"
                        >
                          <p-input />
                        </p-form-model-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="24">
                      <div class="gutter-box">
                        <p-form-model-item label="问题描述">
                          <p-textarea placeholder="请输入问题描述" allow-clear></p-textarea>
                        </p-form-model-item>
                      </div>
                    </p-col>
                    <p-col :span="24" class="flex_right">
                      <p-button type="primary">提交</p-button>
                      <p-button>取消</p-button>
                      <p-button type="danger">删除</p-button>
                    </p-col>
                  </p-row>
                </p-form>
              </p-collapse-panel>
            </p-collapse>

            <p-collapse class="headDrawer" default-active-key="1" ref="item3">
              <p-collapse-panel key="1" header="维修部门">
                
                <p-form :form="form">
                  <p-row :gutter="16">
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box" type="flex" justify="center">
                        <p-form-model-item
                          :labelCol="labelCol1"
                          :wrapperCol="wrapperCol"
                          label="交换人"
                        >
                          <p-input />
                        </p-form-model-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-model-item
                          :labelCol="labelCol1"
                          :wrapperCol="wrapperCol"
                          label="交换日期"
                        >
                          <j-date
                            placeholder="交换日期"
                            v-decorator="['myFrom.startDate']"
                            style="width: 100%"
                          />
                        </p-form-model-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-item label="维修状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <j-dict-select-tag
                            type="list"
                            v-decorator="['myFrom.maintaintype', validatorRules.type]"
                            :trigger-change="true"
                            dictCode="product_type"
                            placeholder="请选择制令类型"
                            style="width:100%"
                          />
                        </p-form-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-item label="问题大类" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <j-dict-select-tag
                            type="list"
                            v-decorator="['myFrom.issue1', validatorRules.type]"
                            :trigger-change="true"
                            dictCode="product_type"
                            placeholder="请选择制令类型"
                            style="width:100%"
                          />
                        </p-form-item>
                      </div>
                    </p-col>
                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-item label="问题小类" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <j-dict-select-tag
                            type="list"
                            v-decorator="['myFrom.issue2', validatorRules.type]"
                            :trigger-change="true"
                            dictCode="product_type"
                            placeholder="请选择制令类型"
                            style="width:100%"
                          />
                        </p-form-item>
                      </div>
                    </p-col>

                    <p-col class="gutter-row" :span="8">
                      <div class="gutter-box">
                        <p-form-model-item
                          :labelCol="labelCol1"
                          :wrapperCol="wrapperCol"
                          label="提交日期"
                        >
                          <j-date
                            placeholder="提交日期"
                            v-decorator="['myFrom.endDate']"
                            style="width: 100%"
                          />
                        </p-form-model-item>
                      </div>
                    </p-col>

                    <p-col :span="24" class="flex_right">
                      <p-button type="primary">提交</p-button>
                    </p-col>
                  </p-row>
                </p-form>
              </p-collapse-panel>
            </p-collapse>

            <p-collapse class="headDrawer" default-active-key="1" ref="item4">
              <p-collapse-panel key="1" header="维修作业">
                
                <!-- 子表单区域 -->
                <p-tabs v-model="activeKey" @change="handleChangeTabs">
                  <p-tab-pane tab="维修作业" :key="refKeys[0]" :forceRender="true">
                    <j-editable-table
                      :ref="refKeys[0]"
                      :loading="fxMaterialRequireTable.loading"
                      :columns="fxMaterialRequireTable.columns"
                      :dataSource="fxMaterialRequireTable.dataSource"
                      :maxHeight="300"
                      :rowNumber="true"
                      :rowSelection="true"
                      :actionButton="true"
                      :operation="true"
                    />
                  </p-tab-pane>
                </p-tabs>
              </p-collapse-panel>
            </p-collapse>

            <p-collapse class="headDrawer" default-active-key="1" ref="item5">
              <p-collapse-panel key="1" header="物料供应商">
                
                <!-- 子表单区域 -->
                <p-tabs @change="handleChangeTabs">
                  <p-tab-pane tab="物料供应商" :key="refKeys[1]" :forceRender="true">
                    <j-editable-table
                      :ref="refKeys[1]"
                      :loading="fxMaterialProviderTable.loading"
                      :columns="fxMaterialProviderTable.columns"
                      :dataSource="fxMaterialProviderTable.dataSource"
                      :maxHeight="300"
                      :rowNumber="true"
                      :rowSelection="true"
                      :actionButton="true"
                      :operation="true"
                    />
                  </p-tab-pane>
                </p-tabs>
              </p-collapse-panel>
            </p-collapse>
          </p-col>
          <p-col :span="3">
            <div class="nav-wrap">
              
              <div class="nav">
                <div class="header">导航</div>
                <div
                  class="item"
                  data-url="item1"
                  :class="{'checked':activeNav==1}"
                  @click="changeNav(1,'item1')"
                >表单</div>
                <div
                  class="item"
                  data-url="item2"
                  :class="{'checked':activeNav==2}"
                  @click="changeNav(2,'item2')"
                >操作员</div>
                <div
                  class="item"
                  data-url="item3"
                  :class="{'checked':activeNav==3}"
                  @click="changeNav(3,'item3')"
                >维修部门</div>
                <div
                  class="item"
                  data-url="item4"
                  :class="{'checked':activeNav==4}"
                  @click="changeNav(4,'item4')"
                >维修作业</div>
                 <div
                  class="item"
                  data-url="item5"
                  :class="{'checked':activeNav==5}"
                  @click="changeNav(5,'item5')"
                >物料供应商</div>
              </div>
            </div>
          </p-col>
        </p-row>
      </p-modal>
    </div>
  </p-card>
</template>
<script>
import pick from 'lodash.pick'
import JDate from "@/components/jeecg/JDate";
import { FormTypes, getRefPromise } from "@/utils/JEditableTableUtil";
import { validateDuplicateValue } from '@/utils/util'
import { JEditableTableMixin } from "@/mixins/JEditableTableMixin";
import JDictSelectTag from "@/components/dict/JDictSelectTag";
export default {
  mixins: [JEditableTableMixin],
  components: {
    JDate,
    JDictSelectTag
  },
  data() {
    return {
      activeNav: 1,//导航标识
      formData: {},
      visible: false,
      confirmLoading: false,
      labelCol1: {
        span: 6
      },
      wrapperCol2: {
        span: 16
      },
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        }
      },
      myFrom: "",
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        productName: { rules: [] },
        type: { rules: [] },
        status: { rules: [{ required: true, message: "请输入状态!" }] },
        workName: { rules: [] },
        startDate: { rules: [] },
        endDate: { rules: [] },
        remark: { rules: [] }
      },
      refKeys: ["fxMaterialRequire", "fxMaterialProvider"],
      tableKeys: ["fxMaterialRequire", "fxMaterialProvider"],
      activeKey: "fxMaterialRequire",
      // 物料需求
      fxMaterialRequireTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: "物料编号",
            key: "materialNo",
            type: FormTypes.popup,
            popupCode: "material_info",
            destFields: "materialNo,materialName,unit",
            orgFieldse: "material_no,material_name,unit",
            width: "200px",
            placeholder: "请输入${title}",
            defaultValue: ""
          },
          {
            title: "物料名称",
            key: "materialName",
            type: FormTypes.input,
            width: "200px",
            placeholder: "请输入${title}",
            defaultValue: ""
          },
          {
            title: "单位",
            key: "unit",
            type: FormTypes.input,
            width: "200px",
            placeholder: "请输入${title}",
            defaultValue: ""
          },
          {
            title: "备注",
            key: "remark",
            type: FormTypes.input,
            width: "200px",
            placeholder: "请输入${title}",
            defaultValue: ""
          },
          {
            title: "操作",
            key: "operation",
            type: FormTypes.operation,
            width: "200px",
          },
        ]
      },
      // 物料供应商
      fxMaterialProviderTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: "供应商名称",
            key: "providerName",
            type: FormTypes.input,
            width: "200px",
            placeholder: "请输入${title}",
            defaultValue: ""
          },
          {
            title: "供应商地址",
            key: "providerAddr",
            type: FormTypes.input,
            width: "200px",
            placeholder: "请输入${title}",
            defaultValue: ""
          },
          {
            title: "数量",
            key: "number",
            type: FormTypes.input,
            width: "200px",
            placeholder: "请输入${title}",
            defaultValue: ""
          },
          {
            title: "联系人",
            key: "contact",
            type: FormTypes.input,
            width: "200px",
            placeholder: "请输入${title}",
            defaultValue: ""
          },
          {
            title: "联系电话",
            key: "contactPhone",
            type: FormTypes.input,
            width: "200px",
            placeholder: "请输入${title}",
            defaultValue: ""
          },
          {
            title: "备注",
            key: "remark",
            type: FormTypes.input,
            width: "200px",
            placeholder: "请输入${title}",
            defaultValue: ""
          },
           {
            title: "操作",
            key: "operation",
            type: FormTypes.operation,
            width: "200px",
          },
        ]
      },
      url: {
          add: '/codedemoapi/feixuns/fxProductionOrders/add',
          edit: '/codedemoapi/feixuns/fxProductionOrders/edit',
          fxMaterialRequire: {
            list: '/codedemoapi/feixuns/fxProductionOrders/queryFxMaterialRequireByMainId'
          },
          fxMaterialProvider: {
            list: '/codedemoapi/feixuns/fxProductionOrders/queryFxMaterialProviderByMainId'
          },
        }
    };
  },

  methods: {
    clickDrawer() {
      this.visible = true;
    },
    changeNav (nav, ref) {
      this.activeNav = nav
     document.querySelector(".ant-modal-wrap").scrollTop = this.$refs[ref].$el.offsetTop 
    },
    handleOk(e) {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
  },
  created () {
  },
  
};
</script>

<style scoped lang="less">
.headDrawer {
  /* text-align: center; */
  margin-bottom: 20px;
}
.main {
  width: 100%;
  border: 1px solid #eee;
  margin-bottom: 24px;
}
.positionR .drawer_main {
  padding-top: 24px;
  width: 98%;
  margin: 0 auto;
  padding-bottom: 24px;
}
.drawerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 15px;
}
.flex_right {
  display: flex;
  justify-content: flex-end;
}
.flex_right button {
  margin: 0 8px;
}

/deep/ .ant-collapse-header {
  text-align: center;
}
.nav-wrap {
  flex: 2;
  margin-left: 16px;
  position: relative;
  .nav {
    width: 140px;
    position: fixed;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(236, 237, 240, 1);
    border-radius: 4px;
    .header {
      padding-left: 16px;
      height: 32px;
      line-height: 32px;
      background: rgba(250, 250, 250, 1);
      border-bottom: 1px solid rgba(236, 237, 240, 1);
    }
    .item {
      padding-left: 16px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      &.checked {
        background: rgba(234, 234, 235, 1);
        color: #0f4db9;
      }
      &:hover {
        color: #0f4db9;
      }
    }
  }
}
</style>